<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 学科跳转面板 -->
        <div class="subject" v-show="this.$route.query.id">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item @click.native="$router.back()"
              >学科管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 表单实现 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="目录名称">
            <el-input v-model="formInline.directoryName"></el-input>
          </el-form-item>
          <el-form-item class="box" label="状态">
            <el-select
              v-model="formInline.state"
              placeholder="请选择"
              :formatter="formatter"
            >
              <el-option label="禁用" value="0"></el-option>
              <el-option label="启动" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="onDelete()">清除</el-button>
            <el-button type="primary" @click="onSubmit()">搜索</el-button>
          </el-form-item>
          <el-button
            class="bu-mong-li"
            type="text"
            v-show="this.$route.query.id"
            @click="$router.back()"
          >
            <i class="el-icon-back"></i>
            返回学科
          </el-button>
          <el-button
            class="pon-button"
            type="success"
            icon="el-icon-edit"
            @click="addfuok"
            >新增按钮</el-button
          >
        </el-form>
        <div class="quantity">
          <p>
            <i class="el-icon-info"></i>&nbsp; &nbsp;&nbsp;数据一共{{
              counts
            }}条
          </p>
        </div>
        <!-- 表格实现 -->
        <el-table :data="employeesList" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="100px">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="180px">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | formatTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column prop="state" label="状态" :formatter="formatter">
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="setRoles(scope.row)">{{
                scope.row.state ? "启用" : "禁用"
              }}</el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 0"
                @click="xiugai(scope.row.id, scope.row.subjectName)"
                >修改
              </el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 0"
                @click="delRoles(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :page-sizes="[1, 5, 10, 15, 20]"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-size="query.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
          >
          </el-pagination>
        </div>
        <!-- 弹出框区域 -->
        <el-dialog
          :title="iEidint ? '修改目录' : '添加目录'"
          :visible.sync="dialogFormVisible"
          width="450px"
        >
          <dire-ctorysd
            v-if="dialogFormVisible"
            :subjectName="subjectName"
            :list-id="listId"
            :i-eidint="iEidint"
            @clone="dialogFormVisible = false"
            @utile="utilent()"
          ></dire-ctorysd>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>
<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
import { list, remove, detail, changeState } from '@/api/hmmm/directorys'
import DireCtorysd from '../components/directorys-add.vue'
import { status } from '@/api/hmmm/constants.js'
import { parseTime } from '@/utils/index.js'
export default {
  name: 'directorys',
  filters: {
    formatTime (item) {
      return parseTime(item)
      //   console.log(item)
    }
  },
  // 引入子组件
  components: {
    DireCtorysd
  },
  data () {
    return {
      //   isDiscipline: false,
      subjectName: '', // 学科名称
      // 状态创建的对象
      user: {},
      //   传入回填数据对应的id
      listId: '',
      // 切换编辑或者添加是true或者是false
      iEidint: false,

      //
      list: {},
      // 弹出框区域
      dialogFormVisible: false,
      // 渲染页面
      employeesList: [],
      // 总共有多少页
      counts: 0,
      //   form表单区域
      formInline: {},
      // 分页区域
      query: {
        pagesize: 5, // 每页条数
        page: 1, // 首次显示第几页
        subjectID: null
      }
    }
  },
  methods: {
    //   是否返回学科跳转
    // 判断是否为学科分类跳转过来
    // async disciplineClassify () {
    //   // 判断路径中是否携带id
    // //   console.log(this.$route.query)
    //   if (this.$route.query.id) {
    //     // 将学科id赋值给获取目录对象中的subjectID属性
    //     // this.query.subjectID = this.$route.query.id
    //   } else {
    //   }
    //   // 如果没有请求参数,直接获取目录
    //   this.gitList()
    // },

    // 启动与禁用状态
    async setRoles (row) {
      //   console.log(row)
      const res = await detail(row)
      //   console.log(res)
      this.user = res.data
      if (this.user.state === 0) {
        this.user.state = 1
        await changeState(this.user)
        // console.log(obj)
        this.gitList()
        this.$message.success('已启用')
      } else {
        this.user.state = 0
        await changeState(this.user)
        this.gitList()
        this.$message.success('已禁用')
      }
    },

    //   添加按钮
    addfuok () {
      this.iEidint = false
      this.dialogFormVisible = true
    },

    //   删除区域
    async delRoles (id) {
      const confiomg = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confiomg === 'cancel') return this.$message('您取消了删除')
      await remove(id)
      //  分页当数据删除到最后一条数据将返回上一夜
      if (this.employeesList.length === 1) {
        this.query.page--
        // 此判断当前删除的是不是第一页的最多一条数据，如果是我们需要将页码重置为1
        if (this.query.page > 1) {
          this.query.page = 1
          this.gitList()
        }
      }
      //   给成功提示
      this.$message.success('您成功删除数据')
      this.gitList()
    },

    // 修改区域
    async xiugai (id, subjectName) {
      this.listId = id
      this.subjectName = subjectName
      this.iEidint = true
      this.dialogFormVisible = true
    },

    //   状态情况
    formatter (row, column, cellValue, index) {
      // 是0或者是1
      const obj = status.find((item) => item.value === cellValue)
      if (obj) {
        return obj.label
      } else {
        return '未知'
      }
    },

    //   页面列表区域渲染
    async gitList (data) {
      const res = await list(data || this.query)
      //   console.log(res.data)

      this.employeesList = res.data.items // 将数据渲染表格
      this.counts = res.data.counts
    },

    // 搜索按钮
    async onSubmit () {
      //   console.log('submit!')
      const res = await list(this.formInline) // 获取表单数据
      //   console.log(res)
      this.employeesList = res.data.items // 赋值
      this.counts = res.data.counts // 赋值分页多少数据
    //   this.formInline = {} // 给一个空的对象
    },

    // 取消按钮
    onDelete () {
      this.formInline = {}
      this.gitList() // 重新获取目录
    },

    // 分页区域
    handleSizeChange (newsize) {
    //   console.log(`每页 ${newsize} 条`)
      this.query.pagesize = newsize
      this.gitList()
    },

    // 分页区域
    handleCurrentChange (newpage) {
    //   console.log(`当前页: ${newpage}`)
      this.query.page = newpage
      this.gitList()
    },

    // 确定按钮
    utilent () {
      this.gitList()
      this.dialogFormVisible = false
      // 清空表单
    }
  },
  // 钩子函数
  created () {
    getCompanys()
    getQuestion()
    // this.query.subjectID = this.$route.query.id
    // this.gitList()
  },
  //   使用监听器监听id如果是空就重新赋值目录借口
  watch: {
    $route: {
      // 对象监听newValue获取数据id属性
      handler (newValue, oldValue) {
        // console.log('测试' + newValue.query.id)
        // 判断如果是id就只获取该数据的id
        if (newValue.query.id) {
          // 根据id获取
        //   const data = {
        //     ...this.query, // 扩展query的所有数据
        //     subjectID: newValue.query.id // 赋值id
        //   }
          this.query.subjectID = newValue.query.id
          // 获取目录的id
          this.gitList(this.query)
        } else {
          // 获取全部列表
          this.query.subjectID = null
          this.gitList()
        }
      },
      // 进入页面就开始监听了
      immediate: true
    }
  }
}
</script>

<style scoped >
.box {
  margin-left: 40px;
}
.pon-button {
  position: absolute;
  right: 42px;
  /* margin-left: 250px; */
}
.quantity {
  height: 50px;
  background-color: #f4f4f5;
  line-height: 50px;
  color: #909399;
  padding-left: 10px;
}
.block {
  margin-left: 400px;
}
.dialog-footer {
  margin-left: 230px;
}
.subject {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 30px;
}
.bu-mong-li {
  /* margin-left: 30px; */
  position: absolute;
  right: 170px;
}
</style>
